<template>
	<view class="box">
		<view class="list" v-for="(item,index) in list" :key="index">
			<view class="listTop">
				<view class="contLeft2">
					{{item.name}}
				</view>
				<!-- <view class="contRight">
					<text>购买数量</text><uni-number-box v-model="item.number" :min="0"></uni-number-box>
				</view> -->
			</view>
			<view class="listTop">
				<view class="contLeft" style="color: #ce231e;font-size: 35rpx;">
					￥ {{item.price}}
				</view>
				<view class="contRight">
					<button class="but" @click="sumt(item.id,item.name)">购买</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMealList,
		getCodeList,
		getCodeNo,
		submitOrder
	} from "@/api/purchase/purchase.js"
	import {weixinPay} from "@/api/weixinPay/weixinPay.js"
	export default {
		data() {
			return {
				list: [], //订单数据
				pageNum: 1, //页码
				listnum: 0,
			}
		},
		onLoad() {
			this.list = []
			this.listnum = 0
			this.pageNum = 1
			this.requestOne()
		},
		//触底加载
		onReachBottom() {
			let that = this
			if (that.list.length == that.listnum) {
				uni.showToast({
					title: '没有更多了',
					icon: "none"
				})
			} else {
				that.pageNum = that.pageNum + 1
				this.requestOne();
			}
		},
		methods: {
			// 获取套餐分页
			requestOne() {
				let that = this
				this.$modal.loading('加载中')
				let datas = {
					pageNo: that.pageNum,
					pageSize: 10,
				}
				getMealList(datas).then(response => {
					this.$modal.closeLoading()
					that.listnum = response.data.total
					if (that.list.length < response.data.total) {
						let minList = that.newArray(response.data.list)
						that.list = that.list.concat(minList)
					}
				})
			},
			//购买按钮
			sumt(id,name) {
				let openid = uni.getStorageSync('openid')
				this.$modal.confirm('确认购买' + name).then(() => {
					this.$modal.loading('加载中')
					let datas = {
						packageId: id
					}
					getCodeList(datas).then(response => {
						let datas2 = {
							id: response.data
						}
						getCodeNo(datas2).then(res2 => {
							let datas3 = {
								id:res2.data.id,
								channelCode:'wx_lite',
								channelExtras:{
									openid:openid
								}
							}
							submitOrder(datas3).then(res3=>{
								this.$modal.closeLoading()
								weixinPay(JSON.parse(res3.data.displayContent)).then(res4 => {
								  if(res4.errMsg == 'requestPayment:ok'){
									  this.$tab.reLaunch('/pagesA/payTrue/payTrue')
								  }
								})
							})
						})
					})
				})
			},
			//处理数据
			newArray(array) {
				// 遍历数组，添加number键，并将price转换为分并再转换为元
				return array.map(item => {
					const newItem = {
						...item, // 保留原始对象的属性
						price: (item.price / 100).toFixed(2) // 转换价格为分再转换回元，保留两位小数
					};
					return newItem;
				});
			}
		}
	}
</script>

<style>
	.box {
		width: 90%;
		margin: 30rpx auto;
	}

	.list {
		width: 100%;
		height: 200rpx;
		border: 1px solid rgb(121, 121, 121);
		border-radius: 10px;
		margin-top: 20rpx;
		background-color: white;
	}

	.listTop {
		width: 100%;
		height: 80rpx;
		margin-top: 15rpx;
		display: flex;
		justify-content: space-between;
	}

	.contLeft {
		width: 350rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 40rpx;
		font-weight: bold;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-left: 35rpx;
	}
	
	.contLeft2 {
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		margin: 0 auto;
		font-size: 40rpx;
		font-weight: bold;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.contRight {
		width: 300rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.but {
		width: 110rpx;
		height: 60rpx;
		color: white;
		background-color: rgb(30, 152, 215);
		border-radius: 5px;
		line-height: 60rpx;
		font-size: 30rpx;
	}
</style>